<template>
    <el-dialog :visible.sync="modals" title="改订单价格" class="order_box" :before-close="handleClose" width="750px">
        <el-table :data="formItem.orderInfo">

            <el-table-column prop="date" label="商品" align="center">
                <template slot-scope="scope">{{ scope.row.info.productName }}</template>
            </el-table-column>
            <el-table-column prop="payNum" label="数量" align="center">
                <template slot-scope="scope">
                    <el-input-number size="mini" :min="1" v-model="scope.row.info.payNum" placeholder="请输入数量"
                        @change="(currentValue, oldValue) => changeNum(scope.row, currentValue, oldValue)">
                    </el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价" align="center">
                <template slot-scope="scope">
                    <el-input-number size="mini" v-model="scope.row.info.price" placeholder="请输入价格"
                        @change="(currentValue, oldValue) => changePrice(scope.row, currentValue, oldValue)">
                    </el-input-number>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="合计" align="center">
                <template slot-scope="scope">
                    {{ scope.row.info.payNum * scope.row.info.price }}
                </template>
            </el-table-column>
            <el-table-column prop="operation" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="danger" plain @click="deleteDetail(scope.row, scope.$index)" size="mini">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px;margin-left: 10px;display: flex;">

            <div class="my-content">
                <div>总价:</div>
                <div>&nbsp;{{ order.payPrice }}</div>
            </div>
            &nbsp;&nbsp;&nbsp;
            <div class="my-content">
                <div>修改后总价:</div>
                <div style="color: blue;">&nbsp;{{ calculateTotalPrice() }}</div>
            </div>
        </div>
        <div slot="footer">

            <div style="position: relative;">
                <el-button type="primary" @click="putSend('formItem')" :loading="btnLoading">提交</el-button>
                <el-button @click="cancel('formItem')">取消</el-button>
                <!-- <div v-if="order.paid" class="paid-overlay">
                    <el-alert :closable="false" title="已支付无法修改" type="error">
                    </el-alert>
                </div> -->
            </div>

        </div>
    </el-dialog>
</template>

<script>
import { orderUpdateNum, sheetInfoApi, orderDetailApi, orderUpdatePrice } from '@/api/order'
import { expressAllApi, exportTempApi } from '@/api/sms'
import { checkPermi } from "@/utils/permission"; // 权限判断函数
import { Debounce } from '@/utils/validate'
const validatePhone = (rule, value, callback) => {
    if (!value) {
        return callback(new Error('请填写手机号'));
    } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error('手机号格式不正确!'));
    } else {
        callback();
    }
};
export default {
    name: 'orderSend',
    props: {
        orderId: String
    },
    data() {
        return {
            btnLoading: false,
            formItem: {
                type: '1',
                expressRecordType: '1',
                sendType: 0,
                expressId: '',
                expressCode: '',
                deliveryName: '',
                deliveryTel: '',
                expressNumber: '',
                expressTempId: '',
                toAddr: '',
                toName: '',
                toTel: '',
                orderNo: '',
                orderInfo: []
            },
            modals: false,
            express: [],
            exportTempList: [],
            order: {},
            tempImg: '',

            expressType: 'normal'
        }
    },
    mounted() {
    },
    methods: {
        checkPermi,
        changeNum(row, currentValue, oldValue) {
            row.payNum = currentValue
            console.log(row, currentValue);
        },
        changePrice(row, currentValue, oldValue) {
            row.price = currentValue
        },
        sendTypeChange(t) {
            this.formItem.sendType = t
        },
        // 默认信息
        sheetInfo() {
            sheetInfoApi().then(async res => {
                this.formItem.toAddr = res.exportToAddress || '';
                this.formItem.toName = res.exportToName || '';
                this.formItem.toTel = res.exportToTel || '';
            })
        },
        calculateTotalPrice() {
            let totalPrice = 0;
            this.formItem.orderInfo.forEach(item => {
                totalPrice += item.info.payNum * item.info.price
            })
            return totalPrice.toFixed(2)
        },
        getDetail(id) {
            orderDetailApi({ orderNo: id }).then(res => {
                this.order = res
                this.formItem = res

                console.log(this.formItem);
            }).catch(() => {
                this.order = {}
            })
        },
        //  
        deleteDetail(row, index) {
            if (this.formItem.orderInfo.length > 1) {
                this.formItem.orderInfo.splice(index, 1)
            } else {
                this.$message.error('至少保留一条商品')
            }
        },

        // 物流公司列表
        getList() {
            expressAllApi({ type: this.expressType }).then(async res => {
                this.express = res
            })
        },
        // 提交
        putSend: Debounce(function (name) {
            this.formItem.orderNo = this.orderId;
            this.btnLoading = true
            orderUpdatePrice(this.formItem).then(async => {
                this.$message.success('修改成功');
                this.modals = false;
                this.btnLoading = false
                this.$emit('submitSuccess',"success")
                this.$refs[name].resetFields();
                this.getDetail()
            }).catch(() => {
                this.btnLoading = false
            })
        }),
        handleClose() {
            this.cancel('formItem');
        },
        cancel(name) {
            this.modals = false;
            this.$refs[name].resetFields();
            this.formItem.type = '1';
            this.formItem.expressRecordType = '1';
        }
    }
}
</script>

<style scoped lang="scss">
.my-content {
    display: flex;
    font-size: 18px;
    font-weight: blod;

}

.paid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
}

.width8 {
    width: 80%;
}

.width9 {
    width: 70%;
}

.tempImgList {
    // opacity: 1;
    width: 38px !important;
    height: 30px !important;
    // margin-top: -30px;
    cursor: pointer;
    position: absolute;
    z-index: 11;

    img {
        width: 38px !important;
        height: 30px !important;
    }
}
</style>